import React, { useEffect, useState } from 'react'
import { Table, Button, Tag,notification } from 'antd'
import { getExcept, UploadArticle } from '../../../api/Audit-manageApi'
import moment from 'moment';

export default function AuditList(props) {
    const [dataSource, setdataSource] = useState([])
    // 列表总条数
    const [total, setTotal] = useState(1)
    useEffect(() => {
        getList()
    }, [])

    // 获取列表
    const getList = (page, limit) => {
        const { userName } = JSON.parse(localStorage.getItem("token"))

        getExcept({
            userName: userName,
            page: page || 1,
            limit: limit || 10
        }).then(res => {
            setTotal(res.queryPageList.total)
            let list = res.queryPageList.records
            setdataSource(list)
        })
    }
    // 表头
    const columns = [
        {
            title: '文章标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.pageId}`}>{title}</a>
            }
        },
        {
            title: '作者',
            dataIndex: 'author'
        },
        {
            title: "文章分类",
            dataIndex: 'categoryName',
            render: (categoryName) => {
                return <div>{categoryName}</div>
            }
        },
        {
            title: "审核状态",
            dataIndex: 'auditState',
            render: (auditState) => {
                const colorList = ['orange', 'green', 'red']
                const auditList = ["未审核", '已通过', '未通过']
                return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
            }
        },
        {
            title: "操作",
            render: (item) => {
                return <div>
                    {
                        item.auditState === 0 && <Button onClick={() => handleRervert(item)}>撤销</Button>
                    }
                    {
                        item.auditState === 1 && <Button danger onClick={()=>handlePublish(item)}>发布</Button>
                    }
                    {
                        item.auditState === 2 && <Button type="primary"onClick={()=>handleUpdate(item)} >修改</Button>
                    }
                </div>
            }
        }
    ];
    // 分页器回调
    const handlePageChange = (page, pageSize) => {
        getList(page, pageSize)
    }
    // 撤销按钮回调
    const handleRervert = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id))
        UploadArticle({
            pageId: item.pageId,
            auditState: 0,
            publishState:3
        }).then((res) => {
            getList()
            notification.info({
                message: `通知`,
                description:`撤销成功！您可以到草稿箱中查看您的新闻`,
                placement: "bottomRight"
            });
        })
    }
    // 修改按钮回调
    const handleUpdate = (item) => { 
        props.history.push(`/news-manage/update/${item.pageId}`)
    }
    // 发布按钮回调
    const handlePublish = (item) => {
        UploadArticle({
            pageId: item.pageId,
            publishState: 1,
            auditState: 1,
            publishTime:moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
        }).then(() => {
            // getList()
            props.history.push('/publish-manage/published')
            notification.info({
                message: `通知`,
                description:
                  `您可以到【发布管理/已经发布】中查看您的新闻`,
                placement:"bottomRight"
            });
        })
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                pagination={{
                    total: total,
                    onChange: (page, pageSize) => handlePageChange(page, pageSize), //改变页码的函数
                    showSizeChanger: true,
                    showQuickJumper: false,
                }}
                rowKey={item => item.pageId}
            />
        </div>
    )
}
